<html>
	<head>
		<meta charset=utf-8>
		<title>My first three.js app</title>
		<style>
			* { margin: 0; padding: 0}
		</style>
	</head>
	<body>           
            <script src="../js/three.js"></script>
		<script>
            /*
            *创建场景对象
            */ 
            let scene = new THREE.Scene();
            /*
            *创建网格模型
            */
            // 平面矩形
            // 构造函数格式：PlaneGeometry(width, height, widthSegments, heightSegments)
            // 后两个参数定义矩形面的细分数，默认值都是1，从WebGL原生代码角度看三个顶点确定一个三角面，一个矩形面至少需要两个三角面组成，
            // 换句话就是说细分数是1，细分数越大你可以理解为多个共平面的三角面组成矩形面
            let box = new THREE.PlaneGeometry(30, 50); 
            //THREE.DoubleSide设置两面均显示
            let material = new THREE.MeshLambertMaterial({
                color:0x0000ff,
                side: THREE.DoubleSide // 如果在材质不中不设置side属性的值为THREE.DoubleSide，
                                        // 你可以用鼠标旋转平面，你会发现只能看到它的一面，另一面看不到
                }); // 材质对象
            let mesh = new THREE.Mesh(box, material); // 网格模型对象
            mesh.translateX(-200);//沿着x轴负方向平移距离200
            scene.add(mesh); // 网格模型添加到场景中

            /*
            *创建圆平面CircleGeometry(radius, segments, thetaStart, thetaLength)
            */ 
            // radius表示圆弧半径，segments表示圆的细分数量，
            // 如果是5，绘制出来的效果就是正五边形平面，绘制圆平面是通过增大segments的值来模拟，
            //  后两个参数表示绘制的起始角度，默认的情况下一个是0，另一个是2π
           //正五边形
            let wubianxing=new THREE.CircleGeometry(50,5); 
            let material2 = new THREE.MeshLambertMaterial({
                color:0x0000ff,
                side: THREE.DoubleSide 
                }); // 材质对象
            let mesh2 = new THREE.Mesh(wubianxing, material2); // 网格模型对象
            mesh2.translateX(-140);//沿着x轴负方向平移距离200
            scene.add(mesh2); // 

            //正40边形(圆平面)
            let yuan=new THREE.CircleGeometry(30,40);
            let material3 = new THREE.MeshLambertMaterial({
                color:0x0000ff,
                side: THREE.DoubleSide 
                }); // 材质对象
            let mesh3 = new THREE.Mesh(yuan, material3); // 网格模型对象
            mesh3.translateX(-50);//沿着x轴负方向平移距离200
            scene.add(mesh3); 

            //四分之一扇形
            let shanxing=new THREE.CircleGeometry(30,40,0,0.5*Math.PI);
            let material4 = new THREE.MeshLambertMaterial({
                color:0x0000ff,
                side: THREE.DoubleSide 
                }); // 材质对象
            let mesh4 = new THREE.Mesh(shanxing, material4); // 网格模型对象
            mesh4.translateY(-15);//沿着x轴负方向平移距离200
            scene.add(mesh4); 
            /**
            * 光源设置
            */
            // 点光源
            let point = new THREE.PointLight(0xffffff); // 0xffffff 定义光照强度
            point.position.set(400, 200, 300); // 点光源位置
            scene.add(point); // 点光源添加到场景中
            // 环境光
            let ambient = new THREE.AmbientLight(0x444444);
            scene.add(ambient);
            
            /*
             *相机设置 
            */
            let width = window.innerWidth;
            let height = window.innerHeight;
            let k = width / height; // 窗口宽高比
            let s = 200; // 三维场景缩放系数,对正交相机有用
            let camera = new THREE.OrthographicCamera (-s*k,s*k, s,-s,1,1000); // 正交相机，参数为左边偏移（偏移是相对于相机中心位置，不是坐标）
                                                                              // ，右偏移，上偏移，下偏移，近平面距离、远平面距离
            
            //let camera = new THREE.PerspectiveCamera (45, k, 1, 1000); //视角、宽高比、近平面距离、远平面距离
            camera.position.set(50, 20, 100); // 设置相机位置
            camera.lookAt(scene.position); // 设置相机方向（指向的场景对象）

            /*
            * 创建渲染器对象
            */
            let renderer = new THREE.WebGLRenderer({
                antialias:true,  //是否开启反锯齿
            });
            renderer.setSize(width, height);
            renderer.setClearColor(0xb9d3ff,1);//设置背景颜色
            document.body.appendChild( renderer.domElement );// body元素中插入canvas对象
            renderer.render(scene,camera);// 执行渲染操作
		</script>
	</body>
</html>